<script setup>
import {ref} from "vue";
import {IconCloseCircle, IconPlus} from "@arco-design/web-vue/es/icon";

const emits = defineEmits(["clickItem", 'clickAdd', 'clickRemove']);
const tabs = defineModel()
const active = defineModel('active')
const clickRemove = (key) => {
  emits('clickRemove', key)
  // tabs.value = tabs.value.filter(e => e.key !== key)
  // active.value = tabs.value[tabs.value.length - 1].key
}
const clickItem = (key) => {
  emits('clickItem', key)
}
const clickAdd = () => {
  emits('clickAdd')
}

const getColor = (v) => {
  if (v === -1) {
    return 'red'
  }
  if (v <= 64)
    return 'green'
  else if (v <= 512)
    return '#FFB800'
  return '#FF5722';
}
</script>

<template>
  <div class="flex-wrap" style="align-items: center;margin: 2px 0">
    <div v-for="item in tabs" class="flex-row item"
         :style="{'color':active===item.key?'#165DFF':'black','border-bottom':active===item.key?'2px solid #165DFF':''}"
         @click="clickItem(item.key)">
      <span style="flex: 1">{{ item.title }}</span>
      <span :style="{'color':getColor(item.delay)}" v-if="item.key!=='console'">{{ item.delay }}ms</span>
      <icon-close-circle v-if="item.key!=='console'" size="20" @click="clickRemove(item.key)"
                         style="margin-left: 5px"/>
    </div>
    <div class="flex-row add-btn" @click="clickAdd">
      <icon-plus/>
      <span>新建</span>
    </div>
  </div>
</template>

<style scoped>
.item {
  width: 120px;
  height: 32px;
  align-items: center;
  margin: 1px 1px;
  font-size: 14px;
  border-left: 1px solid;
  border-top: 1px solid;
  border-right: 1px solid;
  padding: 0 5px;
  border-color: #E5E6EB;
  cursor: pointer;
  background-color: #F7F8FA;
}

.add-btn {
  background-color: azure;
  padding: 5px;
  cursor: pointer;
  margin-left: 3px;
}
</style>